<template>
  <div class="setting-panel-gui">
    <g-field
      label="排列方式"
    >
      <el-select
        v-model="config.arrangement"
        size="mini"
      >
        <el-option
          v-for="item in arrangements"
          :key="item.id"
          :label="item.value"
          :value="item.id"
        />
      </el-select>
    </g-field>
    <g-field
      label="间隔"
    >
      <el-slider
        v-model="config.distance"
        :min="-100"
        :max="500"
        :step="0.5"
        :show-tooltip="false"
        show-input
        input-size="mini"
        class="g-slider"
      />
    </g-field>
    <g-field-collapse
      label="标题"
    >
      <g-field
        :level="2"
        label="标题名"
        tooltip="支持从数据中获取标题内容,详见数据面板"
      >
        <el-input
          v-model="config.title.content"
          size="mini"
        />
      </g-field>
      <g-field-collapse
        label="文本样式"
      >
        <g-field
          :level="2"
          label="字体"
        >
          <el-select
            v-model="config.title.textStyle.fontFamily"
            size="mini"
          >
            <el-option
              v-for="item in fontFamilys"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            />
          </el-select>
        </g-field>
        <g-field
          :level="2"
          label="字号"
        >
          <g-input-number
            v-model="config.title.textStyle.fontSize"
            :min="10"
            :max="100"
            :step="1"
            :is-inline="false"
          />
        </g-field>
        <g-field
          :level="2"
          label="颜色"
        >
          <g-color-picker
            v-model="config.title.textStyle.color"
          />
        </g-field>
        <g-field
          :level="2"
          label="粗细"
        >
          <el-select
            v-model="config.title.textStyle.fontWeight"
            size="mini"
          >
            <el-option
              v-for="item in fontWeights"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            />
          </el-select>
        </g-field>
      </g-field-collapse>
      <g-field
        :level="2"
        label="对齐方式"
      >
        <el-select
          v-model="config.title.textAlign"
          size="mini"
        >
          <el-option
            v-for="item in hAligns"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          />
        </el-select>
      </g-field>
    </g-field-collapse>
    <g-field-collapse
      label="翻牌器"
    >
      <g-field
        :level="2"
        tooltip="请选择您系统有的字体,如果您系统无此字体,标题将会显示默认字体"
        label="字体"
      >
        <el-select
          v-model="config.counter.fontFamily"
          size="mini"
        >
          <el-option
            v-for="item in fontFamilys"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          />
        </el-select>
      </g-field>
      <g-field
        :level="2"
        label="水平对齐"
      >
        <el-select
          v-model="config.counter.justifyContent"
          size="mini"
        >
          <el-option
            v-for="item in justifyContents"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          />
        </el-select>
      </g-field>
      <g-field-collapse
        label="间距"
      >
        <g-field
          :level="2"
          label="前缀"
        >
          <g-input-number
            v-model="config.counter.margin.preNum"
            :min="-100"
            :max="100"
            :step="0.5"
            :is-inline="false"
          />
        </g-field>
        <g-field
          :level="2"
          label="后缀"
        >
          <g-input-number
            v-model="config.counter.margin.numSuff"
            :min="-100"
            :max="100"
            :step="0.5"
            :is-inline="false"
          />
        </g-field>
      </g-field-collapse>
      <g-field-collapse
        label="前缀"
      >
        <g-field
          :level="2"
          label="内容"
        >
          <el-input
            v-model="config.counter.prefix.content"
            size="mini"
          />
        </g-field>
        <g-field-collapse
          label="文本样式"
        >
          <g-field
            :level="2"
            label="字号"
          >
            <g-input-number
              v-model="config.counter.prefix.textStyle.fontSize"
              :min="10"
              :max="100"
              :step="1"
              :is-inline="false"
            />
          </g-field>
          <g-field
            :level="2"
            label="字体颜色"
          >
            <g-color-picker
              v-model="config.counter.prefix.textStyle.color"
            />
          </g-field>
          <g-field
            :level="2"
            label="字体粗细"
          >
            <el-select
              v-model="config.counter.prefix.textStyle.fontWeight"
              size="mini"
            >
              <el-option
                v-for="item in fontWeights"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              />
            </el-select>
          </g-field>
        </g-field-collapse>
      </g-field-collapse>
      <g-field-collapse
        label="后缀"
      >
        <g-field
          :level="2"
          label="内容"
        >
          <el-input
            v-model="config.counter.suffix.content"
            size="mini"
          />
        </g-field>
        <g-field-collapse
          label="文本样式"
        >
          <g-field
            :level="2"
            label="字号"
          >
            <g-input-number
              v-model="config.counter.suffix.textStyle.fontSize"
              :min="10"
              :max="100"
              :step="1"
              :is-inline="false"
            />
          </g-field>
          <g-field
            :level="2"
            label="字体颜色"
          >
            <g-color-picker
              v-model="config.counter.suffix.textStyle.color"
            />
          </g-field>
          <g-field
            :level="2"
            label="字体粗细"
          >
            <el-select
              v-model="config.counter.suffix.textStyle.fontWeight"
              size="mini"
            >
              <el-option
                v-for="item in fontWeights"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              />
            </el-select>
          </g-field>
        </g-field-collapse>
      </g-field-collapse>
    </g-field-collapse>
    <g-field-collapse
      label="数字"
    >
      <g-field-collapse
        label="文本样式"
      >
        <g-field
          :level="2"
          label="字号"
        >
          <g-input-number
            v-model="config.numbers.textStyle.fontSize"
            :min="10"
            :max="100"
            :step="1"
            :is-inline="false"
          />
        </g-field>
        <g-field
          :level="2"
          label="字体颜色"
        >
          <g-color-picker
            v-model="config.numbers.textStyle.color"
          />
        </g-field>
        <g-field
          :level="2"
          label="字体粗细"
        >
          <el-select
            v-model="config.numbers.textStyle.fontWeight"
            size="mini"
          >
            <el-option
              v-for="item in fontWeights"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            />
          </el-select>
        </g-field>
      </g-field-collapse>
      <g-field
        :level="2"
        label="数字间隔"
      >
        <el-slider
          v-model="config.numbers.marginRight"
          :min="0"
          :max="10"
          :step="0.5"
          :show-tooltip="false"
          show-input
          input-size="mini"
          class="g-slider"
        />
      </g-field>
      <g-field
        :level="2"
        label="背景色"
      >
        <g-color-picker
          v-model="config.numbers.bgColor"
        />
      </g-field>
      <g-field
        :level="2"
        label="背景圆角"
      >
        <el-slider
          v-model="config.numbers.bgRadius"
          :min="0"
          :max="100"
          :step="0.5"
          :show-tooltip="false"
          show-input
          input-size="mini"
          class="g-slider"
        />
      </g-field>
      <g-field
        :level="2"
        label="分隔符背景"
      >
        <el-switch
          v-model="config.numbers.bgSeparating"
        />
      </g-field>
      <g-field
        :level="2"
        label="默认位数"
      >
        <el-slider
          v-model="config.numbers.digit"
          :min="0"
          :max="100"
          :step="1"
          :show-tooltip="false"
          show-input
          input-size="mini"
          class="g-slider"
        />
      </g-field>
      <g-field
        :level="2"
        label="小数点位数"
      >
        <el-slider
          v-model="config.numbers.decimal"
          :min="0"
          :max="10"
          :step="1"
          :show-tooltip="false"
          show-input
          input-size="mini"
          class="g-slider"
        />
      </g-field>
      <g-field
        :level="2"
        label="除数"
      >
        <g-input-number
          v-model="config.numbers.divisor"
          :is-inline="false"
        />
      </g-field>
      <g-field
        :level="2"
        label="千分位分隔符"
      >
        <el-switch
          v-model="config.numbers.separatingChart"
        />
      </g-field>
      <g-field
        :level="2"
        tooltip="分隔符最长一位，超出一位取第一位，无法以数字为分隔符"
        label="千分位分隔符符号"
      >
        <el-input
          v-model="config.numbers.separatingSymbol"
          size="mini"
        />
      </g-field>
      <g-field
        :level="2"
        tooltip="分隔符最长一位，超出一位取第一位，无法以数字为分隔符"
        label="小数分隔符符号"
      >
        <el-input
          v-model="config.numbers.decimalSymbol"
          size="mini"
        />
      </g-field>
      <g-field
        :level="2"
        label="定宽"
      >
        <g-input-number
          v-model="config.numbers.fixedWidth"
          :min="0"
          :max="100"
          :step="1"
          :is-inline="false"
        />
      </g-field>
      <g-field
        :level="2"
        label="开启动画"
      >
        <el-switch
          v-model="config.numbers.animation"
        />
      </g-field>
      <!-- <g-field
        :level="2"
        tooltip="当传入数据不变时始终开启动画"
        label="始终动画"
      >
        <el-switch
          v-model="config.numbers.sameDataFlip"
        />
      </g-field> -->
      <g-field
        :level="2"
        label="动画时长(ms)"
      >
        <g-input-number
          v-model="config.numbers.duration"
          :min="0"
          :max="100000"
          :step="500"
          :is-inline="false"
        />
      </g-field>
    </g-field-collapse>
  </div>
</template>

<script lang='ts'>
import { defineComponent, PropType, toRef, computed } from 'vue'
import {
  fontFamilys,
  fontWeights,
  hAligns,
  justifyContents,
} from '@/data/select-options'
import { NumberTitleFlop } from './number-title-flop'

export default defineComponent({
  name: 'VNumberTitleFlopProp',
  props: {
    com: {
      type: Object as PropType<NumberTitleFlop>,
      required: true,
    },
  },
  setup(props) {
    const config = toRef(props.com, 'config')

    const arrangements = computed(() => ([
      { id: 'top', value: '标题在上' },
      { id: 'topcenter', value: '标题在上中' },
      { id: 'left', value: '标题在左' },
      { id: 'bottom', value: '标题在下' },
      { id: 'bottomcenter', value: '标题在下中' },
    ]))

    return {
      config,
      arrangements,

      fontFamilys,
      fontWeights,
      hAligns,
      justifyContents,
    }
  },
})
</script>
